<template>
  <view class="pages">
    <!-- <view class="hr"></view> -->
    <view class="cell">
      <view class="title">
        <input maxlength="50" v-model="form.insureName" placeholder="请输入保险名称" />
      </view>
    </view>
    <view class="cell">
      <view class="title">
        <input type="number" v-model="form.insureFeeYear" placeholder="请输入缴费年限（年）" />
      </view>
    </view>
    <view class="cell">
      <view class="title">
        <input maxlength="50" v-model="form.insureContent" placeholder="请输入保障内容" />
      </view>
    </view>
    <view class="cell">
      <view class="title">
        <input type="number" v-model="form.insureFee" placeholder="请输入保费（元）" />
      </view>
    </view>

    <!-- <view class="cell" @tap="chooseCycle">
      <viwe class="cell-left">缴费周期</viwe>
      <viwe class="cell-right">
        <view>{{form.cycleText}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view> -->
    <view class="cell">
      <viwe class="cell-left">保单周年日</viwe>
      <viwe class="cell-right">
        <uni-datetime-picker type="date" v-model="form.insureBrithday" :border="false"></uni-datetime-picker>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell">
      <viwe class="cell-left">投保日期</viwe>
      <viwe class="cell-right">
        <uni-datetime-picker type="date" v-model="form.insureStartDay" :border="false"></uni-datetime-picker>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="hr"></view>
    <view class="cell">
      <view class="title">
        <input maxlength="200" v-model="form.remark" placeholder="请输入备注" />
      </view>
    </view>
    <view class="botton">
      <button class="botton-botton" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
let id = null
export default {
  data() {
    return {
      form: {
        id: '',
        insureName: '',
        insureFeeYear: '',
        insureContent: '',
        insureFee: '',
        insureBrithday: '',
        insureStartDay: '',
        remark: '',
      }
    }
  },
  onLoad(e) {
    id = e.id
    const _this = this
    uni.getStorage({
      key: 'row_key',
      success: function (res) {
        uni.removeStorage({ key: 'row_key' });
        _this.form = res.data
      }
    });
  },
  methods: {
    /**选择周期*/
    chooseCycle() {
      let _this = this
      let itemList = ['每年', '每月']
      uni.showActionSheet({
        itemList: itemList,
        success: function (res) {
          _this.form.cycle = res.tapIndex
          _this.form.cycleText = itemList[res.tapIndex]
        }
      });
    },
    submit() {
      let _this = this;
      if (!_this.form.insureName) {
        uni.showToast({
          title: '请输入保险名称',
          icon: 'none'
        })
        return
      }
      if (!_this.form.insureFeeYear) {
        uni.showToast({
          title: '请输入缴费年限',
          icon: 'none'
        })
        return
      }

      if (!_this.form.insureContent) {
        uni.showToast({
          title: '请输入保障内容',
          icon: 'none'
        })
        return
      }
      if (!_this.form.insureFee) {
        uni.showToast({
          title: '请输入保费',
          icon: 'none'
        })
        return
      }
      if (!_this.form.insureBrithday) {
        uni.showToast({
          title: '请选择保单周年日',
          icon: 'none'
        })
        return
      }
      if (!_this.form.insureStartDay) {
        uni.showToast({
          title: '请选择投保日期',
          icon: 'none'
        })
        return
      }
      if (_this.form.id) {
        _this.$post('/sale/wx/customer_insure/update_data', { ..._this.form }, true).then(res => {
          console.log(res.data);
          if (res.code * 1 === 200) {
            uni.navigateBack({
              delta: 1
            });
            uni.showToast({
              title: '修改成功',
              icon: 'none'
            })
          }
        })
        return
      }
      _this.$post('/sale/wx/customer_insure/add_data', { ..._this.form, customerId: id }, true).then(res => {
        console.log(res.data);
        if (res.code * 1 === 200) {
          uni.navigateBack({
            delta: 1
          });
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.pages {
  padding: 10px 3vw;
}
.cell {
  width: 94vw;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-right {
    display: flex;
    font-size: 16px;
    color: #96968e;
    align-items: center;
    .uni-icons {
      padding-left: 5px;
    }
  }
}
.title {
  height: 45px;
  width: 94vw;
  background: #f6f6f6;
  border-radius: 10px;
  font-weight: bold;
  input {
    width: 100%;
    height: 100%;
    padding-left: 10px;
  }
}
.hr {
  background: #ddd;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-radius: 20px;
    width: 70vw;
    color: #fff;
    background: #ed7467;
  }
}
</style>
